<template>

    <div>
        <Login msg="this is Home Page"/>
        <router-link to="/about">跳转关于页面</router-link>
    </div>

    <br>

    <div>
        <el-button @click="btn">中文</el-button>
    </div>

    <div>
        <h3>{{store.state.about}}</h3>
    </div>


    <div>
        <el-table
                v-loading="state.loading"
                :data="state.tableData"
                tooltip-effect="dark"
                style="width: 100%"
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="id"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="城市"
            >
            </el-table-column>
        </el-table>
    </div>


</template>

<script setup>
    import Login from "./Login.vue";
    import {onMounted, reactive} from 'vue'
    import {useStore} from 'vuex'
    import request from '../request'

    const store = useStore()


    const state = reactive({
        loading: false,
        tableData: [],
    })


    onMounted(() => {
        btn()
    })


    // const btn = async () => {
    //     const {data} = await axios.get('/api/get')
    //     console.log(data)
    //     // const str = store.state.home
    //     // console.log(store)
    // }
    const btn = async () => {
        // const data = await request.get('/api/get')
        await request.get('/api/get')
            .then(res => {
                console.log(res.data)
                console.log(res.data.data)
                console.log(res.data.data.list)
                state.loading = true
                state.tableData = res.data.data.list
                state.loading = false
            })

        // const str = store.state.home
        // console.log(store)
    }


</script>

<style scoped>

</style>
